<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="libs/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/base.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="libs/css/cart.css"/>
		<title></title>
	</head>
	<body>
		<div id="head">
			
		</div>
		<div id="content">
			<div id="mycart">
				<ul id="cason">
					<li>我的购物袋</li>
					<li>填写核对订单</li>
					<li>订单提交成功</li>
				</ul>
			</div>
			<div id="tips">
				
			</div>
			<div id="count">
				<table id="rel" cellspacing="" cellpadding="">
					<tr><td>商品图片</td><td>商品名称</td><td>商品尺寸</td><td>数量</td><td>单价</td><td>操作</td></tr>
				</table>
				<ul id="ul11">
					<li>包装：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥0.00</li>
					<li>邮费：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥0.00</li>
					<li>优惠券:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥0.00</li>
					<li>总计：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong></strong></li>
				</ul>
				<button id="finish"><a href="login.html">去结算</a></button>
			</div>
			
		</div>
		
		<div id="foot">
		</div>
		<script type="text/javascript">
			$('#head').load("head.html?_="+Math.random());
			$('#foot').load("footer.html?_="+Math.random());
			
			//加载购物车内容
			//第一步要先把cookie上的内容给取下来
			var getInfo =JSON.parse(getCookie('value'));
			console.log(getInfo.length);
			$('#tips').text("成功将" + getInfo[0].name + "加入购物车").css({'line-height':'30px','background':'url(libs/img/ok.jpg) no-repeat left','text-indent':'2em'});
			var money = [];
			for(var i=0;i<getInfo.length;i++){
				var _html = '<tr>';
				_html += "<td><img src = 'libs/img/" + getInfo[i].img + "'/></td>";
				_html += '<td>'+ getInfo[i].name + '</td>';
				_html += '<td>'+ getInfo[i].size +'</td>';
				_html += "<td><button class='moveDown'>-</button><span class='quantity'>1</span>" + "<button class='moveUp'>+</button></td>";
				_html += "<td><span class='single'>" + getInfo[i].price +'</span></td>';
				_html += "<td><a id='a'" + i + '>删除<a/>' + '</td></tr>';
				$('#count table').append(_html);
				$('#count table').css('text-align','center');
				$('#count table img').css({"width":"25px","height":"30px"});
				
			}
			$('#count a').mouseover(function(){
				$(this).css('color','red');
				$(this).mouseout(function(){
					$(this).css('color','dimgray');
				});
				
			});
			//点击删除
			$('#count a').click(function(){
				console.log($(this).parent().prev().text());
				$(this).closest('tr').remove();
				count();
			});
			//点击减
			$('.moveDown').click(function(){
				var num = $(this).closest('td').find('.quantity').text();
				if(num<=0){
				}else{
					num = parseInt(num);
					num--;
					$(this).closest('td').find('.quantity').text(num);
					count();
				}
				//相应的总计也要改变				
			});
			//点击加
			$('.moveUp').click(function(){
				var num = $(this).closest('td').find('.quantity').text();
				
				num = parseInt(num);
				num++;
				$(this).closest('td').find('.quantity').text(num);
				console.log(parseFloat( $('#rel tr').eq(1).find('.quantity').text() ));
				count();
			});
			
			//计算消费总额
			function count(){
				var sum = 0;
				for(var i=1; i<$('#rel tr').length; i++){
					var amount = parseFloat( $('#rel tr').eq(i).find('.quantity').text() );
					var price = parseFloat( $('#rel tr').eq(i).find('.single').text() );
					sum += amount*price;
				}
				console.log(sum.toFixed(2));
				$('#ul11 strong').text('￥'+sum.toFixed(2));
				$('#ul11 strong').css('color','red');
			}
			//页面刷新就执行这个函数
			count();
			
			
		</script>
	</body>
</html>
